import React, { Component } from 'react';
import css from './index.less';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import EditModal from '@/components/EditModal';
import { Button, message } from 'antd';
import { connect } from 'dva';
import { timeFormat } from '@/utils/common';
import AuthButton from '@/components/AuthButton';

type State = {
  selectProject: any;
};
type Props = {
  dispatch: Function;
};
class Department extends Component<Props> {
  state: State = {
    selectProject: [],
  };
  table = null;

  filters = [
    {
      key: 'buildType',
      type: 'select',
      label: '项目性质',
      options: this.props.dict.buildType,
    },
    {
      key: 'serviceTypeUuid',
      type: 'select',
      label: '项目类型',
      asyncopt: {
        url: '/api/data/v1/getDataList',
        data: {
          code: 'service',
        },
      },
    },
    {
      key: 'approveStatus',
      type: 'select',
      label: '审批状态',
      options: this.props.dict.approveStatus,
    },
    {
      key: 'no',
      type: 'input',
      label: '项目ID',
    },
    {
      key: 'name',
      type: 'input',
      label: '项目名称',
    },
    {
      key: 'orgUnitName',
      type: 'input',
      label: '业主单位',
    },
  ];
  columns = [
    { title: '项目ID', dataIndex: 'no', width: 150 },
    {
      title: '项目名称',
      dataIndex: 'name',
      render: (text, data) => (
        <Button type="link" onClick={() => this.goDetail(data, true)}>
          {text}
        </Button>
      ),
    },
    {
      title: '申报日期',
      dataIndex: 'createTime',
      width: 180,
      format: 'YYYY-MM-DD',
    },
    { title: '项目性质', dataIndex: 'buildType' },
    { title: '项目类型', dataIndex: ['serviceTypeData', 'display'] },
    { title: '行业领域', dataIndex: ['professionData', 'display'] },
    { title: '总投资（万元）', dataIndex: 'totalInvestment' },
    {
      title: '拟开建年份',
      dataIndex: 'expectStartYear',
      render: text => `${text}年`,
    },
    {
      title: '状态',
      dataIndex: 'locked',
      render: (text, data) => (
        <span key={text}>{text ? '已锁定' : '已解锁'}</span>
      ),
    },
  ];
  goDetail = (data, readOnly) => {
    const url = `projectCollect/yearProjectCollect/edit?id=${data.uuid ||
      ''}&readOnly=${readOnly || ''}&fromType=1`;
    this.props.dispatch({
      type: '$router/forward',
      payload: {
        url,
      },
    });
  };
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({
        selectProject: selectedRows,
      });
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: any) => ({
      // disabled: record.approveStatus === 'PASS' || record.approveStatus === 'REFUSE', // Column configuration not to be checked
      name: record.name,
    }),
  };

  handler = type => {
    const { selectProject } = this.state;
    const obj = {
      export: {
        type: '导出',
        url: '/api/project/store/v1/unlock',
      },
      lock: {
        type: '锁定',
        url: '/api/project/store/v1/lock',
      },
      unlock: {
        type: '解锁',
        url: '/api/project/store/v1/unlock',
      },
      remove: {
        type: '移除',
        url: '/api/project/store/v1/remove',
      },
    };
    this.props
      .dispatch({
        type: 'base/handler',
        payload: {
          ...obj[type],
          data: {
            uuidList: selectProject.map(item => item.uuid),
          },
        },
      })
      .then(() => {
        this.table.fetch();
      });
  };
  /**
   * 删除用户
   * @param data
   */
  delete() {
    const { selectProject } = this.state;
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/project/store/v1/remove',
          type: '该项目',
          data: {
            uuidList: selectProject.map(item => item.uuid),
          },
        },
      })
      .then(() => {
        this.table.fetch();
      });
  }
  render() {
    const { selectProject } = this.state;
    return (
      <div>
        <FilterSearch
          filters={this.filters}
          onSearch={val => this.table.fetch(val)}
        >
          {/* <AuthButton
            disabled={!selectProject.length}
            role="export_annual_project"
          >
            导出
          </AuthButton> */}
          <AuthButton
            disabled={!selectProject.length}
            onClick={() => this.handler('unlock')}
            role="unlock_annual_project"
          >
            解锁
          </AuthButton>
          <AuthButton
            disabled={!selectProject.length}
            role="lock_annual_project"
            onClick={() => this.handler('lock')}
          >
            锁定
          </AuthButton>
          <AuthButton
            disabled={!selectProject.length}
            role="del_annual_project"
            onClick={() => this.delete()}
          >
            移除
          </AuthButton>
        </FilterSearch>
        <TableList
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          tableProps={{
            rowSelection: {
              type: 'checkbox',
              ...this.rowSelection,
            },
          }}
          columns={this.columns}
          source="/api/project/store/v1/annualProject/query"
        />
      </div>
    );
  }
}

export default connect(state => state.base)(Department);
